<!-- ------------------------------------------------------------------------- -->
<!-- ------------------------------------------------------------------------- -->
<!-- ---------------------- 流调管理--密接人员管理 ---------------------------- -->
<!-- ------------------------------------------------------------------------- -->
<!-- ------------------------------------------------------------------------- -->

<template>
  <div class="box">
    <div class="banner-box">
      <div class="crumbs-box">
        <div class="crumbs">信息登记 / 密接人员管理</div>
      </div>
      <!-- 表单 -->
      <div class="form">
        <!-- 表单第一行 -->
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          size="large"
        >
          <el-form-item>
            <div class="form-text">姓名:</div>
            <el-input v-model="formInline.name" placeholder="请输入" />
          </el-form-item>

          <el-form-item>
            <div class="form-text">性别:</div>
            <el-select placeholder="请选择" v-model="formInline.sex">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <div class="form-text">身份证号:</div>
            <el-input placeholder="请输入" v-model="formInline.IDNumber" />
          </el-form-item>
        </el-form>

        <!-- 表单第二行 -->
        <el-form :inline="true" class="demo-form-inline" size="large">
          <el-form-item>
            <div class="form-text">联系电话:</div>
            <el-input placeholder="请输入" v-model="formInline.tel" />
          </el-form-item>
          <el-form-item>
            <div class="form-text">现居地:</div>
            <el-input placeholder="请输入" v-model="formInline.currentResidence" />
          </el-form-item>
          <el-form-item>
            <div class="form-text">登记人:</div>
            <el-input v-model="formInline.registrant" placeholder="请输入" />
          </el-form-item>
        </el-form>

        <!-- 表单第三行 -->
        <el-form :inline="true" class="demo-form-inline" size="large">
          <el-form-item prop="count">
            <div class="form-text">登记日期:</div>
            <el-date-picker
              v-model="formInline.registrationDate"
              type="date"
              placeholder="请选择"
              value-format="YYYY-MM-DD"
              style="width: 305px"
            />
          </el-form-item>
          <el-form-item>
            <div class="form-text">密接类型:</div>
            <el-select
              placeholder="请选择"
              v-model="formInline.caseType"
            >
              <el-option label="次密" value="次密接" />
              <el-option label="密接" value="密接" />
              <el-option label="一般" value="一般" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="form-text">状态:</div>
            <el-select
              placeholder="请选择"
              v-model="formInline.status"
            >
              <el-option label="待核实" value="待核实" />
              <el-option label="居家医学观察中" value="居家医学观察中" />
              <el-option label="待转运" value="待转运" />
              <el-option label="排查转归" value="排查转归" />
              <el-option label="待隔离点接收" value="待隔离点接收" />
              <el-option label="隔离点隔离中" value="隔离点隔离中" />
              <el-option label="居家检测中" value="居家检测中" />
              <el-option label="居家监测解除" value="居家监测解除" />
            </el-select>
          </el-form-item>
        </el-form>
        <!-- 查询重置按钮 -->
        <div class="button-box">
          <el-row class="mb-4">
            <el-button type="primary" size="large" @click="search"
              >查询</el-button
            >
            <el-button size="large" @click="clear">重置</el-button>
          </el-row>
        </div>
      </div>

      <!-- 表格 -->
      <div class="table">
        <!-- 表格布局 -->
        <div class="table-box">
          <!-- 表格上面 -->
          <div class="table-top">
            <el-row class="mb-4">
              <el-button type="primary" size="large" @click="addTable">新增</el-button>
              <el-button style="width: 130px" size="large">EXCEL导出</el-button>
              <el-button style="width: 130px" size="large">EXCEL导入</el-button>
              <div class="download">下载模板</div>
            </el-row>
          </div>
          <!-- 表格中间 -->
          <div class="table-banner">
            <el-table
              :data="TableData"
              style="width: 100%"
              border="true"
              :row-style="tableRowStyle"
              :header-cell-style="{
                background: '#f5f5f5',
                color: '#606266',
                height: '60px',
              }"
            >
              <el-table-column
                label="序号"
                width="180"
                align="center"
                style="line-height: 60px"
              >
                <template #default="{ $index }">
                  {{ (currentPage4 - 1) * pageSize4 + $index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                width="180"
                align="center"
              />
              <el-table-column
                prop="nextClosePatientNumber"
                label="次密人数"
                width="180"
                align="center"
              />
              <el-table-column
                prop="sex"
                label="性别"
                width="180"
                align="center"
              />
              <el-table-column
                prop="idNum"
                label="身份证号"
                width="180"
                align="center"
              />
              <el-table-column
                prop="phoneNum"
                label="联系电话"
                width="180"
                align="center"
              />
              <el-table-column
                prop="address"
                label="现居地"
                width="180"
                align="center"
              />
              <el-table-column
                prop="associatedCases"
                label="关联病例"
                width="180"
                align="center"
              />
              <el-table-column
                prop="jointType"
                label="密接类型"
                width="180"
                align="center"
              />
              <el-table-column
                prop="registrant"
                label="登记人"
                width="180"
                align="center"
              />
              <el-table-column
                prop="registrationDate"
                label="登记日期"
                width="180"
                align="center"
              />
              <el-table-column
                prop="status"
                label="状态"
                width="180"
                align="center"
              />
              <!-- 表格固定列 -->
              <el-table-column
                fixed="right"
                label="操作"
                width="300"
                align="center"
              >
                <template #default="scope">
                  <el-button
                    style="width: 50px; font-size: 15px"
                    link
                    type="primary"
                    size="small"
                    @click="handleClick(scope.row)"
                    >编辑</el-button
                  >

                  <el-button
                    style="width: 50px; font-size: 15px"
                    link
                    type="primary"
                    size="small"
                    @click="delTable(scope.row)"
                    >删除</el-button
                  >
                  <el-button
                    style="width: 50px; font-size: 15px"
                    link
                    type="primary"
                    size="small"
                    @click="viewDetail(scope.row)"
                    >查看详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 表格下面 分页 -->
          <div class="table-footer">
            <div class="demo-pagination-block">
              <el-pagination
                v-model:current-page="currentPage4"
                v-model:page-size="pageSize4"
                :page-sizes="[10]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total,  prev, pager, next,sizes, jumper"
                :total="totalNum"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <router-view></router-view>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "@/util/http";
import { number } from "echarts";

export default defineComponent({
  name: "ManagementOfConfidentialPersonnel",
  components: {},
  setup() {
    const router = useRouter();
    const value1 = ref("");
    // 表单部分动态数据绑定
    const formInline = reactive({
      name: "",
      sex: "",
      IDNumber: "",
      tel: "",
      registeredResidence: "", //户籍地
      currentResidence: "", //现居地
      caseType: "", //病例类型
      registrant: "", //登记人
      registrationDate: "", //登记日期
      status:''
    });

    //新增
    const addTable = ()=>{
      router.push('/AddCloseKnit')
    }

    // 编辑跳转
    const handleClick = (row) => {
      let rowId = row.id;
      router.push({ path: "/CloseKnitEditing", query: { rowId } });
    };

    //表格的高度
    const tableRowStyle = ({ row }: { row: any }) => {
      return { height: "55px" };
    };

    //请求---查询
    const search = () => {
      console.log(formInline,'------------');
      
      axios({
        method: "get",
        url: "cryptographer/findClosePatientListByConditions",
        params: {
          currentPage: currentPage4.value,
          pageSize: pageSize4.value,
          name:formInline.name,
          sex:formInline.sex,
          idNum:formInline.IDNumber,
          phoneNum:formInline.tel,
          address:formInline.currentResidence,
          registrant:formInline.registrant,
          registrationDate:formInline.registrationDate,
          jointType:formInline.caseType,
          status:formInline.status
        },
      }).then((res) => {
        // console.log(res.data.data.districtSysContactList);
        console.log(res);
        tableData.TableData = res.data.data.districtSysContactList;
        tableData.totalNum = res.data.data.total;
      });
    };

    //请求---进页面渲染表格
    //用变量接住数据
    let tableData = reactive({
      TableData: [],
      totalNum: number,
    });
    onMounted(() => {
      axios({
        method: "get",
        url: "/cryptographer/findClosePatientList",
        params: {
          currentPage: currentPage4.value,
          pageSize: pageSize4.value,
        },
      }).then((res) => {
        console.log(res);

        console.log(res.data.data.districtSysContactList);
        // console.log(res.data.data.total);

        tableData.TableData = res.data.data.districtSysContactList;
        tableData.totalNum = res.data.data.total;
        
      });
    });

    //重置
    const clear = () => {
      axios({
        method: "get",
        url: "/cryptographer/findClosePatientList",
        params: {
          currentPage: currentPage4.value,
          pageSize: pageSize4.value,
        },
      }).then((res) => {
        tableData.TableData = res.data.data.districtSysContactList;
        tableData.totalNum = res.data.data.total;
      });
      formInline.tel=''
      formInline.name=''
      formInline.sex=''
      formInline.IDNumber=''
      formInline.currentResidence=''
      formInline.registrant=''
      formInline.registrationDate=''
      formInline.caseType=''
      formInline.status=''
    };

    // 删除
    const delTable = (row) => {
      console.log(row.id);
      ElMessageBox.confirm("删除后将不可恢复,是否继续此操作?", "删除确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios({
            method: "get",
            url: "/cryptographer/delCrowded",
            params: { id: row.id },
          }).then((res) => {
            console.log(res.data.msg,'33333333');
            if (res.data.msg == "删除成功") {
              console.log('-----------------');
              
              axios({
                method: "get",
                url: "/cryptographer/findClosePatientList",
                params: {
                  currentPage: currentPage4.value,
                  pageSize: pageSize4.value,
                },
              }).then((res) => {
                console.log(res.data.data.districtSysContactList);

                tableData.TableData = res.data.data.districtSysContactList;
                tableData.totalNum = res.data.data.total
              });
            }
          });
          ElMessage({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "该确诊病例关联了若干数据,不支持删除操作!",
          });
        });
    };

    //新增弹出框
    const dialogTableVisible = ref(false);
    const dialogFormVisible = ref(false);
    const formLabelWidth = "140px";
    const gotoEdit = () => {
      router.push("/ConfirmedCasesEdit");
    };

    const form = reactive({
      name: "",
      region: "",
      date1: "",
      date2: "",
      delivery: false,
      type: [],
      resource: "",
      desc: "",
    });

    const gridData = [
      {
        date: "2016-05-02",
        name: "John Smith",
        address: "No.1518,  Jinshajiang Road, Putuo District",
      },
      {
        date: "2016-05-04",
        name: "John Smith",
        address: "No.1518,  Jinshajiang Road, Putuo District",
      },
      {
        date: "2016-05-01",
        name: "John Smith",
        address: "No.1518,  Jinshajiang Road, Putuo District",
      },
      {
        date: "2016-05-03",
        name: "John Smith",
        address: "No.1518,  Jinshajiang Road, Putuo District",
      },
    ];

    // 分页
    const currentPage4 = ref(1);
    const pageSize4 = ref(10);
    const small = ref(false);
    const background = ref(true);
    const disabled = ref(false);

    //页面跳转输入
    const handleCurrentChange = (val: number) => {
      console.log(formInline);
      console.log(val);
      
      axios({
        method: "get",
        url: "/cryptographer/findClosePatientListByConditions",
        params: {
          currentPage: currentPage4.value,
          pageSize: pageSize4.value,
          name:formInline.name,
          sex:formInline.sex,
          idNum:formInline.IDNumber,
          phoneNum:formInline.tel,
          address:formInline.currentResidence,
          registrant:formInline.registrant,
          registrationDate:formInline.registrationDate,
          jointType:formInline.caseType,
          status:formInline.status
        },
      }).then((res) => {
        // console.log(res.data.data.districtSysContactList);
        console.log(res);
        tableData.TableData = res.data.data.districtSysContactList;
        tableData.totalNum = res.data.data.total;
      });
    };

    // 查看详情
    const viewDetail = (row) => {
      let id = row.id
      router.push({path:"/DetailInformation",query:{id}});
    };

    return {
      formInline,
      handleClick,
      ...toRefs(tableData),
      tableRowStyle,
      currentPage4,
      pageSize4,
      small,
      background,
      disabled,
      handleCurrentChange,
      delTable,
      dialogTableVisible,
      dialogFormVisible,
      formLabelWidth,
      form,
      gridData,
      gotoEdit,
      value1,
      // 查看详情
      viewDetail,
      search,
      clear, //重置
      addTable
    };
  },
});
</script>

<style scoped>
.crumbs {
  font-size: 15px;
  height: 60px;
  width: 100%;

  display: flex;
  align-items: center;
  padding-left: 10px;
}
.box {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #f5f5f5;
  flex-direction: column;
  align-items: center;
}
.banner-box {
  width: 100%;
}
.crumbs-box {
  width: 100%;
}

/* 表单验证 */
.form {
  width: 100%;
  height: 304px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 5px;
}

/* 表格 */
.table {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background-color: #fff;
  align-items: center;
  border-radius: 5px;
  margin-top: 10px;
}

.table-box {
  width: 93%;
  height: 100%;
}

.table-top {
  height: 80px;
  display: flex;
  align-items: center;
}

.download {
  height: 40px;
  display: flex;
  align-items: center;
  margin-left: 40px;
  font-size: 15px;
}

.form-text {
  width: 100px;
  text-align: center;
  font-size: 15px;
}

.el-input,
.el-select {
  width: 350px;
}
.button-box {
  width: 100%;
  display: flex;
  /* justify-content: center; */
  padding-left: 110px;
}
.el-button {
  width: 95px;
}
.el-table__row {
  height: 70px;
}

/* 分页区域 */
.table-footer {
  height: 100px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* 新增弹出框 */
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.dialog-box {
  position: fixed;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
</style>
